<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小米商城</title>
	<meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米10 Pro 、小米9、小米MIX Alpha，Redmi 红米系列Redmi 10X、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持." />
    <meta name="keywords" content="小米,redmi,小米10,Redmi 10X,小米MIX Alpha,小米商城" />
	<!--处理样式-->
	<link rel="stylesheet" type="text/css" href="static/css/reset.css">
	<!--公共的CSS-->
	<link rel="stylesheet" type="text/css" href="static/css/style.css">
	<!--首页的CSS-->
	<link rel="stylesheet" type="text/css" href="static/css/index.css">
	<!--引入网页标题图标-->
	<link rel="shortcut icon" type="static/image/x-icon" href="static/img/favicon.ico">
	<link rel="stylesheet" type="text/css" href="static/css/aa.css">
</head>

	  <style>
    .css1{
        display: flex;
        flex-direction: column;
        justify-content: center; /* 垂直居中 */
         align-items: flex-start;
            margin-left: 30px;
    }

    button {
        background-color: #eee;
        border: none;
        padding: 17px 40px;
        text-align: center;
        color: black;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
</style>
<body>
<div class="page-top">
	<div class="container">
	<div class="top-lt">
		<a href="{{ url_for('index') }}">小米商城</a>
			<span>|</span>
		<a href="">MIUI</a>
			<span>|</span>
		<a href="">IoT</a>
			<span>|</span>
		<a href="">云服务</a>
			<span>|</span>
		<a href="">金融</a>
			<span>|</span>
		<a href="">有品</a>
			<span>|</span>
		<a href="">小爱开放平台</a>
			<span>|</span>
		<a href="">企业团购</a>
			<span>|</span>
		<a href="">资质证照</a>
			<span>|</span>
		<a href="">协议规则</a>
			<span>|</span>
		<a href="" class="download">下载app
			<div class="down-box">
				<img src="static/img/download.png" alt="小米商城">
				小米商城APP
			</div>
		</a>
	</div>

	<div class="top-gt">
		<div class="car-box">
			<a href="" class="tit">购物车</a>
			<div class="pop">
			<!--	<p class="no-good">购物车还没有商品，赶紧选购吧！</p>  -->
			<ul class="list">
				{%for product in comment_products1 %}
				<li>
					<a href="" class="pic"><img src="static/img/xiaomi14_1.png"></a>
					<div class="txt">小米14，{{product.config}}</div>
					<div class="num">
						<i>X</i>
						<h4>{{product.price}}</h4>

					</div>
				</li>
				{%endfor%}
			</ul>
			<div class="total">
				<div class="price">
					<p>共{{num}}件商品</p>
					<h3>{{price}}</h3>
				</div>
				<a href="" class="btn">立即结算</a>
			</div>

			</div>
		</div>
		<div class="login">
			{% if session['logged_in'] %}
                                <span class="username">欢迎{{session['username']}}登录</span>
									<a href="/product_board">商品管理</a>
                                <a href="/logout">退出</a>
                            {% else %}
                                <a href="/login">登录</a>
                            {% endif %}
			<span>|</span>
			<a href="register">注册</a>
			<span>|</span>

		</div>
		<!--<div class="userinfo">
			<a href="" class="link">消息通知</a>
			<a href="" class="link">我的订单</a>
			<div class="user">
				<a href="" class="tit">用户~~</a>
				<ul>
				<li><a href="">个人中心</a></li>
				<li><a href="">评价晒单</a></li>
				<li><a href="">我的喜欢</a></li>
				<li><a href="">小米账号</a></li>
				<li><a href="">退出登录</a></li>
				</ul>
			</div>
-->		</div>
	</div>
	</div>
</div>
<!--导航-->


<!--a>轮播图-->

  <div class="left-div">
  <div class="banner">
    <div class="content">
      <ul id="item">
        <li class="item active" ><a href="#"><img src="static/img/xiaomi14_1.png"></a></li>
        <li class="item" ><a href="#"><img src="static/img/xiaomi14_2.png"></a></li>
        <li class="item" ><a href="#"><img src="static/img/xiaomi14_3.png"></a></li>
        <li class="item" ><a href="#"><img src="static/img/xiaomi14_4.png"></a></li>
        <li class="item" ><a href="#"><img src="static/img/xiaomi14_5.png"></a></li>
      </ul>
      <div id="btn-left"></div>
      <div id="btn-right"></div>
      <ul id="point">
        <li class="point active" data-index="0"></li>
        <li class="point" data-index="1"></li>
        <li class="point" data-index="2"></li>
        <li class="point" data-index="3"></li>
        <li class="point" data-index="4"></li>
      </ul>
    </div>
  </div>
</div>

<div class="right_div">

  <div class="conter"><h2>xiaomi 14</h2></div>
  <div class="conter2">
      <h1 class="color1"> [至高优惠300元！ 购机至高享24期免息]</h1>
      <h1 class="color2">徕卡光学Summilux镜头｜光影猎人900影像传感器 | 75mm徕卡浮动长焦 | 小米澎湃OS ｜第三代骁龙®8移动平台｜小米环形冷泵</h1>
  </div>
  <div class="conter1" ><h1 class="color1">小米自营</h1></div>
  <div class="conter" ><p id="selected-price" class="color3">价格: ￥3999</p></div>
  <hr>

  <div >
	  <div style="display: flex;
    width:50%;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 30px;">
    <h2>请选择您需要的配置</h2>
    <button class="config-button" data-value="12加128" data-price="3999">12+128</button>
	<button class="config-button" data-value="12加256" data-price="4299">12+256</button>
	<button class="config-button" data-value="12加512" data-price="4599">12+512</button>
</div>

<div style="margin-top: 20px;">
    <h2>请选择颜色</h2>
    <button class="color-button" data-color="红色">红色</button>
    <button class="color-button" data-color="蓝色">蓝色</button>
    <button class="color-button" data-color="绿色">绿色</button>
    <button class="color-button" data-color="白色">白色</button>
</div>
	  <h1>
    <button id="submit-button">加入购物车</button></h1>

<style>
    .selected {
        border: 2px solid red; /* 选中时的边框颜色 */
    }
</style>

<script>
    // 获取所有按钮元素
    const buttons = document.querySelectorAll('.config-button');
    const colorButtons = document.querySelectorAll('.color-button');

    // 为每个按钮添加点击事件监听器
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            // 首先移除所有按钮的选中样式
            buttons.forEach(btn => btn.classList.remove('selected'));

            // 为当前点击的按钮添加选中样式
            this.classList.add('selected');
        });
    });

    colorButtons.forEach(colorButton => {
        colorButton.addEventListener('click', function() {
            colorButtons.forEach(btn => btn.classList.remove('selected'));
            this.classList.add('selected');
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const buttons = document.querySelectorAll('.config-button');
        const colorButtons = document.querySelectorAll('.color-button');
        const submitButton = document.getElementById('submit-button');
        const selectedPriceElement = document.getElementById('selected-price');

        let selectedValue = ''; // 存储所选配置的值
        let selectedColor = ''; // 存储所选颜色的值
        let selectedPrice = 0; // 存储所选配置的价格

        buttons.forEach(button => {
            button.addEventListener('click', function() {
                selectedValue = this.getAttribute('data-value');
                selectedPrice = parseFloat(this.getAttribute('data-price'));
                selectedPriceElement.textContent = '价格: ￥' + selectedPrice; // 更新价格显示
                buttons.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
            });
        });

        colorButtons.forEach(colorButton => {
            colorButton.addEventListener('click', function() {
                selectedColor = this.getAttribute('data-color');
                colorButtons.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
            });
        });

        submitButton.addEventListener('click', function() {
            const xhr = new XMLHttpRequest();
            const url = '/submit-config';
            const params = '&config=' + selectedValue + '&color=' + selectedColor + '&price=' + selectedPrice;
            xhr.open('POST', url, true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            };
            xhr.send(params);
        });
    });
</script>

  </div>


<!--<div style="display: flex;-->
<!--    width:50%;-->
<!--    flex-direction: column;-->
<!--    align-items: flex-start;-->
<!--    margin-left: 30px;">-->

<!--    <h2>请选择您需要的配置</h2>-->
<!--    <button class="config-button" data-value="12+128" data-price="3999">12+128</button>-->
<!--    <button class="config-button" data-value="12+256" data-price="4299">12+256</button>-->
<!--    <button class="config-button" data-value="12+512" data-price="4599">12+512</button>-->

<!--</div>-->

<!--<div style="margin-top: 20px;">-->
<!--    <h2>请选择颜色</h2>-->
<!--    <button class="color-button" data-color="red">红色</button>-->
<!--    <button class="color-button" data-color="blue">蓝色</button>-->
<!--    <button class="color-button" data-color="green">绿色</button>-->
<!--</div>-->
<!--	<button id="submit-button">加入购物车</button>-->

<!--<style>-->
<!--    .selected {-->
<!--        border: 2px solid red; /* 选中时的边框颜色 */-->
<!--    }-->
<!--</style>-->

<!--<script>-->
<!--    document.addEventListener('DOMContentLoaded', function() {-->
<!--        const buttons = document.querySelectorAll('.config-button');-->
<!--        const colorButtons = document.querySelectorAll('.color-button');-->
<!--        const submitButton = document.getElementById('submit-button');-->
<!--        const selectedPriceElement = document.getElementById('selected-price');-->

<!--        let selectedValue = ''; // 存储所选配置的值-->
<!--        let selectedColor = ''; // 存储所选颜色的值-->
<!--        let selectedPrice = 0; // 存储所选配置的价格-->

<!--        buttons.forEach(button => {-->
<!--            button.addEventListener('click', function() {-->
<!--                selectedValue = this.getAttribute('data-value');-->
<!--                selectedPrice = parseFloat(this.getAttribute('data-price'));-->
<!--                selectedPriceElement.textContent = '价格: ￥' + selectedPrice; // 更新价格显示-->
<!--                buttons.forEach(btn => btn.classList.remove('active'));-->
<!--                this.classList.add('active');-->
<!--            });-->
<!--        });-->

<!--        colorButtons.forEach(colorButton => {-->
<!--            colorButton.addEventListener('click', function() {-->
<!--                selectedColor = this.getAttribute('data-color');-->
<!--                colorButtons.forEach(btn => btn.classList.remove('active'));-->
<!--                this.classList.add('active');-->
<!--            });-->
<!--        });-->

<!--        submitButton.addEventListener('click', function() {-->
<!--            const xhr = new XMLHttpRequest();-->
<!--            const url = '/submit-config';-->
<!--            const params = 'config=' + selectedValue + '&color=' + selectedColor + '&price=' + selectedPrice;-->
<!--            xhr.open('POST', url, true);-->
<!--            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');-->
<!--            xhr.onreadystatechange = function() {-->
<!--                if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {-->
<!--                    console.log(xhr.responseText);-->
<!--                }-->
<!--            };-->
<!--            xhr.send(params);-->
<!--        });-->
<!--    });-->
<!--</script>-->


</div>
</body>
<script src="static/js/index.js"></script>
</html>